{% comment %}
<!--
  Copyright (C) 2008 ZHENG Zhong <http://www.zhengzhong.net/>

  Created on 2009-04-08.
  $Id$
-->
{% endcomment %}

<div id="comments" class="ajax_box">

  <!-- javascript _______________________________________________________________________________-->
  
  <script type="text/javascript">//<![CDATA[
  
    function loadCommentPage(page_number) {
      // Prepare AJAX options.
      var options = {
        type: "GET",
        url: "{{webapp_}}/resto/{{resto.uid}}/comments/",
        data: { page: page_number },
        success: function(data) {
          // Replace the original #comments AJAX box by the new one received from the server.
          $("#comments").after(data).remove();
        },
        error: function(xhr, status, exc) {
          // We are still in the original #comments AJAX box: show AJAX error.
          $("#comments_pager .page_links").show();
          $("#comments_pager .ajax_indicator").hide();
          var ajax_error = $("#comments .ajax_error");
          ajax_error.text("Error loading comments via AJAX (GET).");
          ajax_error.show();
        }
      };
      // Send the AJAX GET request, leave the rest to the AJAX callback functions.
      $("#comments_pager .page_links").hide();
      $("#comments_pager .ajax_indicator").show();
      $.ajax(options);
    }
  
  //]]></script>
  
  <!-- main _____________________________________________________________________________________-->
  
  <div class="main">
  
    <h2>{{resto.comments}} comments on this resto...</h2>
    
    {% for comment in comments %}
      <div class="comment">
        <div class="comment_head">
          <b>{{comment.author.nickname}}</b> said:
        </div>
        <div class="comment_body">
          {{comment.content|escape|linebreaks}}
        </div>
        <div class="comment_foot">
          {{comment.post_date|date:"Y-m-d H:i:s"}}
        </div>
      </div>
    {% endfor %}
    
    <div id="comments_pager">
      <div class="page_links">
        {% if prev_page_number %}
          <a href="javascript:void(0);" onclick="loadCommentPage('{{prev_page_number}}');">Prev</a>
        {% else %}
          Prev
        {% endif %}
        | <b>Page #{{page_number}}</b> |
        {% if next_page_number %}
          <a href="javascript:void(0);" onclick="loadCommentPage('{{next_page_number}}');">Next</a>
        {% else %}
          Next
        {% endif %}
      </div>
      <div class="ajax_indicator hidden">
        <img src="{{static_}}/images/ajax_indicator.gif" alt="AJAX Indicator"/>
        Loading comments...
      </div>
    </div><!--/#comments_pager-->
    
    {% include "foodsnroses/ajax/ajax_error.html" %}
  
  </div><!--/.main-->
  
    
  <!-- view _____________________________________________________________________________________-->
  
  <div class="view">
  
    <div class="toggle_link">
      {% if user_ %}
        <a href="javascript:void(0);" onclick="toggleBox('#comments');">[add a comment]</a>
      {% else %}
        <a href="{{sign_in_url_}}">[sign in to add a comment]</a>
      {% endif %}
    </div>
  
  </div><!--/.view-->
  
  <!-- edit _____________________________________________________________________________________-->
  
  {% if user_ %}
  
    <div class="edit hidden">
    
      <form id="add_comment_form" class="form" action="{{webapp_}}/resto/{{resto.uid}}/comments/" method="POST"
            onsubmit="return submitAjaxForm('#comments', '#add_comment_form');">
        <input type="hidden" name="ajax_box" value="comments"/>
        <div>
          <textarea style="width: 600px; height: 300px;" type="text" name="content"></textarea>
          <br/>
          <span class="help_text">You are signed-in as <b>{{user_.nickname}}</b>.</span>
        </div>
        <div>
          <input class="button" type="submit" value="Update"/>
          <input class="button" type="button" onclick="toggleBox('#comments');" value="Cancel"/>
          <span class="ajax_indicator hidden">
            <img src="{{static_}}/images/ajax_indicator.gif" alt="AJAX Indicator"/>
          </span>
        </div>
      </form>
    
    </div><!--/.edit-->
  
  {% endif %}{# user_ #}

</div><!--/#comments-->


